<template >
    <div class="box">
        <div id="fixedBox" style="position: fixed;top: 0;left: 0;width: 10px;height: 10px;"></div>
        <!-- BANNER -->
        <div class="banner" id="hannerBox">
            <div class="flexslider">
                <el-carousel height = "420px" @change = "(e)=>change(e,'poster')" trigger="click" >
                    <el-carousel-item v-for="(item,idx) in homeData.poster" :key="idx">
                        <!-- {{ item.image }} -->
                        <img  :src="item.image" style="width:100%;height:100%;" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="listW">
                <div class="w1200">
                    <!-- <dl class="listCon">
                        
                        <div v-for = "(it,idx) in homeData.tuijian" :key = "idx">
                            <dt class="construction"><img src="../../assets/picture/ban_medicine.png">{{ it.category_name }}</dt>
                            <dd v-if="it.data&&it.data.length>0">
                                <a v-for="(t,i) in it.data" :key="i" @click="toPage(t.goods_id,'courseDetails','id')" target="blank">{{ t.name }}</a>
                            </dd>
                        </div>
                       
                    </dl> -->
                    <!-- <div class="loginCont">
                        <div class="loginForm" id="loginwin">
                            <h2 class="loginTitle"><span>登录</span>中辰网校</h2>
                            <input type="text" id="userName" placeholder="请输入用户名或手机号">
                            <input type="password" id="userPwd" placeholder="请输入您的密码">
                            <a href="javascript:void(0);" id="loginBtn" class="loginBtn">立即登录</a>
                            <div class="tools">
                                <input type="checkbox" id="autologin" checked="checked">&nbsp;记住密码
                                <a @click = "toPage('','forgetpw')" target="_blank">忘记密码了？</a>
                            </div>
                        </div>
                        <div class="loginAfter" id="logininfowin" style="display: none;">
                            <div class="userInfo">
                                <img id="userHeadImageUrl" src="../../assets/picture/login_user.png" class="userImg">
                                <p><span id="l_username">CJY12979</span>同学<br>欢迎来到中辰网校！</p>
                            </div>
                            <div class="alerTxt"><span>中辰网校提醒您：</span>距离下次考试时间已经越来越近了，只有抓紧时间学习，您才能考试时在考场上应对自如呦~</div>
                            <a href="login.html" target="_blank" class="loginBtn">点击进入会员中心</a>
                            <div class="loginMenu">
                                <a href="login.html" target="_blank">设置昵称</a>
                                <a href="login.html" target="_blank">修改资料</a>
                                <a href="login.html" target="_blank">修改密码</a>
                                <a href="javascript:void(0);" id="loginOutBtn" title="点击退出">退出登录</a>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="content">
            <!-- 优势 -->
            <div class="flow">
                <ul class="w1200">
                    <li v-for="(item,idx) in homeData.sparkle" :key="idx">
                        <div><img :src="item.image"></div>
                        <p>{{ item.title }}</p>
                        <span>{{ item.subtitle }}</span>
                    </li>
                </ul>
            </div>

            <!-- 热门课程 -->
            <div class="con hotCourse">
                <div class="unifyTitle">
                    <b><span>热门</span>课程</b>
                    <div class="swiper-container1 navMenu">
                        <div class="swiper-wrapper">
                            <p @click.stop = "setActiveClick(it.config_id,'goodsSecondCategory','getGoods')" v-for="(it,idx) in homeData.secondCategory" :key="idx" :class = "{active:activeData.goodsSecondCategory == it.config_id}" class="swiper-slide ">{{ it.name }}</p>
                        </div>
                    </div>
                    <a @click = "toPage('','course')" target="_blank" class="more">MORE&nbsp;&gt;</a>
                </div>
                <div class="hotCourseCon">
                    <div class="picScroll-left slideTab" style="display: block;">
                        <div class="tempWrap swiper-container2">
                            <ul class="picList swiper-wrapper">
                                <li  class= "swiper-slide" v-for = "(it,idx) in homeData.goods" :key = "idx">
                                    <a @click = "toPage(it.goods_id,'courseDetails','id')">
                                        <div class="courseTop">
                                            <img :src="it.image">
                                            <!-- <h6>{{ it. }}</h6> -->
                                            <!-- <p>中药</p> -->
                                        </div>
                                        <div class="courseBotm">
                                            <p>{{ `${it.name}${it.type==1?"单科":it.type==2?"全科":"混合"}` }}</p>
                                            <span v-if="it.service&&it.service.length>0" v-for="(t,k) in it.service" :key = "k">{{ t }}</span>
                                            
                                            <b>{{ it.price }}</b>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <i class="prev prev1 btn"></i><i class="next next1 btn"></i>
                    </div>
                </div>
            </div>

            <!-- 公开直播课 -->

            <!-- 公开直播课 -->
            <!-- <div class="con openClass" id="openClass">
                <div class="unifyTitle">
                    <b><span>公开</span>直播课</b>
                    <div class="swiper-container navMenu">
                        <div class="swiper-wrapper" id="topLiveClassList">
                        </div>
                    </div>
                    <a href="list1.html" target="_blank" class="more">MORE&nbsp;&gt;</a>
                </div>
                <div class="openClassCon" id="bigLiveClassList">
                </div>
            </div> -->

            <!-- 免费试听课 -->
            <div class="con freeDemo">
                <div class="unifyTitle">
                    <b><span>免费</span>试听课</b>
                    <div class="swiper-container3 navMenu">
                        <div class="swiper-wrapper">
                            <p @click.stop = "setActiveClick(it.config_id,'courseSecondCategory','getCourse')" v-for="(it,idx) in homeData.secondCategory" :key="idx" :class = "{active:activeData.courseSecondCategory == it.config_id}" class="swiper-slide ">{{ it.name }}</p>

                        </div>
                    </div>
                    <a @click = "toPage('','audition')"  target="_blank" class="more">MORE&nbsp;&gt;</a>
                </div>
                <div class="freeDemoCon">
                    <div class="picScroll-left slideTab" style="display: block;">
                        <div class="tempWrap swiper-container4">
                            <ul class="picList swiper-wrapper">
                                <li class= "swiper-slide" v-for = "(it,idx) in homeData.course" :key="idx">
                                    <a @click.stop = "toPage('','audition')" >
                                        <div class="classImg">
                                            <image
                                                :src="it.image">
                                            </image>
                                        </div>
                                        <p class="className" >{{ it.name }}</p>
                                        <div class="lessonBotm">
                                            <span class="classTeaName" v-if="it.teacher&&it.teacher.name">讲师：{{ it.teacher.name }}</span>
                                            <i  >立即试听</i>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <i class="prev prev2 btn"></i><i class="next next2 btn"></i>
                    </div>
                </div>
            </div>
            
            <!-- 师资团队 -->
            <div v-show="homeData.teacher&&homeData.teacher.length>0" style="overflow: hidden;" class="con teacherTeam" id="teacherTeam1">
                <div class="unifyTitle">
                    <b><span>师资</span>团队</b>
                    <div class="swiper-container9 navMenu">
                        <div class="swiper-wrapper">
                            <p @click.stop = "setActiveClick(it.config_id,'teacherSecondCategory','getTeacher')" v-for="(it,idx) in homeData.secondCategory" :key="idx" :class = "{active:activeData.teacherSecondCategory == it.config_id}" class="swiper-slide ">{{ it.name }}</p>

                        </div>
                    </div>
                    <a @click = "scrollToSection()" target="_blank" class="more">MORE&nbsp;&gt;</a>
                </div>
                <div class="swiper-container8 view">
                    <div class="swiper-wrapper" id="bigTeacherList">
                        <div class="swiper-slide" v-for="(it,idx) in homeData.teacher" :key="idx">
                            <div class = "t_left">
                                <h5>{{ it.name }}<a href="###"></a></h5>
                                <p><b>讲师介绍：</b><span>{{ it.des }} </span></p>
                                <p><b>主讲科目：</b><span>{{ it.zhujiang }} </span></p>
                            </div>
                            <div class="t_right"><img style="width: 100%;" :src="it.image"></div>
                        </div>
                    </div>
                </div>

                <div class="preview " style="z-index: 99;">
                    <div ref="mysWipper111" class="swiper-container5" style="overflow: hidden;">
                        <div class="swiper-wrapper" id="smallTeacherList">
                            <div :style = "`opacity: ${'teacherId'+it.teacher_id == activeTeacherIndex?1:0.7};`" class="swiper-slide" v-for="(it,idx) in homeData.teacher" :key="idx"><img :src="it.image"></div>
                        </div>
                        <i class="btn prev3 prev"></i>
                        <i class="btn next3 next"></i>
                    </div>
                </div>
            </div>
            <!-- 在线题库 -->
            <div class="con question">
                <div class="unifyTitle">
                    <b><span>在线</span>题库</b>
                    <div class="swiper-container6 navMenu">
                        <div class="swiper-wrapper">
                            <p @click.stop = "setActiveClick(it.config_id,'third','getThird')" v-for="(it,idx) in homeData.secondCategory" :key="idx" :class = "{active:activeData.third == it.config_id}" class="swiper-slide ">{{ it.name }}</p>
                        </div>
                    </div>
                    <a @click = "toPage('','subjectBank')" target="_blank" class="more">MORE&nbsp;&gt;</a>
                </div>
                <div class="queCon">
                    <div>
                        <dl>
                            <dt><b>历年真题</b><span>更新时间</span></dt>
                            <dd @click = "toPage('','subjectBank')" v-for="(it,idx) in homeData.lnzt" :key = "idx"><i>●</i><p class="a" style="width: 155px;"  target="_blank">{{ it.name }}</p><span style="width: 162px;font-size: 14px;">{{ it.create_time }}</span></dd>
                        </dl>
                        <dl>
                            <dt><b>章节练习</b><span>更新时间</span></dt>
                            <dd @click = "toPage('','subjectBank')" v-for="(it,idx) in homeData.zjlx" :key = "idx"><i>●</i><p class="a" style="width: 155px; "  target="_blank">{{ it.name }}</p><span style="width: 162px;font-size: 14px;">{{ it.create_time }}</span></dd>
                        </dl>
                        <dl>
                            <dt><b>模拟试题</b><span>更新时间</span></dt>
                            <dd @click = "toPage('','subjectBank')" v-for="(it,idx) in homeData.mnst" :key = "idx"><i>●</i><p class="a" style="width: 155px;"  target="_blank">{{ it.name }}</p><span style="width: 162px;font-size: 14px;">{{ it.create_time }}</span></dd>
                        </dl>
                    </div>
                </div>
            </div>

            <!-- 最新资讯 & 常见问题 -->
            <div class="news_question clear">
                <div>
                    <h5><b>最新资讯</b><a @click = "toPage('','news')" target="_blank">更多&nbsp;&gt;</a></h5>
                    <p v-for = "(it,idx) in homeData.news" :key = "idx" >
                        <i>{{ Number(idx)+1 }}</i>
                        <!-- <p>11</p> -->
                        <span id="textBox" @click.stop = "toPage(it.news_id,'newsDetails','id')" >{{ it.title }}</span>
                        <span>{{ it.create_time }}</span>
                    </p>
            </div>
            <div>
                <h5><b>常见问题</b><a @click = "toPage('','help')" target="_blank">更多&nbsp;&gt;</a></h5>
                <dl >
                    <span v-for="(it,idx) in homeData.homefaq" :key="idx" style="display: inline-block;">
                        <dt >{{ `${textNum[idx]}  、${it.title}` }}<span>{{ it.create_time }}</span></dt>
                        <dd>{{ it.subtitle }}</dd>
                    </span>
                </dl>
            </div>
        </div>

        <!-- 荣誉资质 -->
        <div class="con honor">
            <div class="unifyTitle">
                <b><span>荣誉</span>资质</b>
            </div>
            <div class="freeDemoCon">
                <div class="picScroll-left honorScroll">
                    <div class="tempWrap swiper-container7">
                        <ul class = "swiper-wrapper">
                            <li class= "swiper-slide" v-for = "(it,idx) in homeData.honor" :key="idx">
                                <img :src="it.image">
                                <div>{{ it.title }}</div>
                                <p>{{ it.subtitle }}</p>
                            </li>
                        </ul>
                    </div>
                    <i class="prev prev4 btn"></i>
                    <i class="next next4 btn"></i>
                </div>
            </div>
        </div>

        <!-- 右侧咨询 -->
        <div class="right_tanc">
            <div class="consult">
                <i></i><span class="borc">电话客服</span>
                <div class="telPhoneC">
                    <dl>
                        <dt>客服电话：</dt>
                        <dd>{{ configInfo?configInfo.kf:'' }}</dd>
                        <!-- <dt>备用电话：</dt>
                        <dd>400-6375-919</dd> -->
                    </dl>
                </div>
            </div>
            <div class="consult feedback">
                <a :href="configInfo?configInfo.shouhou:''" target="_blank">
                    <i></i><span class="borc">售后服务</span>
                </a>
            </div>
            <div class="we app">
                <i></i><span class="borc">APP下载</span>
                <div class="weC appCon">
                    <p><img :src="configInfo?configInfo.appqrcode:''"></p>
                </div>
            </div>
            <div class="we wx">
                <i></i><b>关注微信</b>
                <div class="weC wxCon">
                    <p><img :src="configInfo?configInfo.wxqrcode:''"></p>
                </div>
            </div>
            <!-- <a href="#fixedBox" class="topa" style="width: 100px;height: 100px;"><i></i></a> -->
            <div  @click = "scoll('fixedBox')" class="topa"><i></i></div>
        </div>
    </div>
</div></template>
<script>
import pagePublic from "@/mixins/pagePublic.js";
import swiperPublic from "@/mixins/swiper.js";
import { bus } from '../../main.js'
import { mapMutations , mapState } from "vuex";

// import { Swiper, SwiperSlide } from 'swiper/vue';
// import 'swiper/css';
export default {
    name: "tem",
    mixins: [pagePublic,swiperPublic],
    // components: {
    //     Swiper,
    //     SwiperSlide,
    // },
    data() {
        return {
            activeTeacherIndex:0,
            textNum:['一','二','三','四','五','六','七','八'],
            homeData:{
                poster:[],
                // 亮点
                sparkle:[],
                // 最新资讯
                news:[],
                // 常见问题
                homefaq:[],
                // 荣誉资质
                honor:[],
                // 二级项目
                secondCategory:[],
                // 热门课程
                goods:[],
                // 试听课
                course:[],
                // 试听课
                // course:[],
                // 师资团队
                teacher:[],
                // 在线题库
                // 历年真题
                lnzt:[],
                // 章节练习
                zjlx:[],
                // 模拟试题
                mnst:[],
                // 轮播图推荐课程
                tuijian:[],

            },
            activeData:{
                poster:0,
                sparkle:0,
                news:0,
                homefaq:0,
                honor:0,
                secondCategory:0,
                teacher:0,
                goods:0,
                lnzt:0,
                zjlx:0,
                mnst:0,
                third:0,
                tuijian:0,
                goodsSecondCategory:0,//热门课程二级分类
                courseSecondCategory:0,//试听课二级分类
                teacherSecondCategory:0,//师资团队二级分类

            },
            swiperDomData:[
                {
                    id:7,
                    container:'.swiper-container8',
                    next:'',
                    prev:'',
                    pagination:'',
                    sideNum:1,
                    loop:true,
                },
                {
                    id:0,
                    container:'.swiper-container1',
                    next:'',
                    prev:'',
                    pagination:'',
                    sideNum:5,
                },
                {
                    id:1,
                    container:'.swiper-container2',
                    next:'.next1',
                    prev:'.prev1',
                    pagination:'',
                    sideNum:4,
                },
                {
                    id:2,
                    container:'.swiper-container3',
                    next:'.next2',
                    prev:'.prev2',
                    pagination:'',
                    sideNum:4,
                },
                {
                    id:3,
                    container:'.swiper-container4',
                    next:'.next2',
                    prev:'.prev2',
                    pagination:'',
                    sideNum:4,
                },
                {
                    id:4,
                    container:'.swiper-container5',
                    next:'.next3',
                    prev:'.prev3',
                    pagination:'.swiper-pagination5',
                    pagination:'',
                    sideNum:4,
                    loop:true,
                },
                {
                    id:5,
                    container:'.swiper-container6',
                    next:'',
                    prev:'',
                    pagination:'',
                    sideNum:4,
                },
                {
                    id:6,
                    container:'.swiper-container7',
                    next:'.next4',
                    prev:'.prev4',
                    pagination:'',
                    sideNum:3,
                },
                
                {
                    id:8,
                    container:'.swiper-container9',
                    next:'',
                    prev:'',
                    pagination:'',
                    sideNum:4,
                    // loop:true,
                },
                // {
                //     container:'.swiper-container1',
                //     next:'',
                //     prev:'',
                //     pagination:'',
                // }
            ],
            urls: {
                list: {
                    url: this.$api.home.teacher,
                    method: "get",
                    sync: false,
                },
            },


        }
    },
    computed: {
        ...mapState(['configInfo']),

    },
    created() {
        this.getHomeData()
        this.getSecondCategory()
        this.getTuijian()//轮播图推荐课程
        bus.$on('scrollToSection',(e)=>{
            setTimeout(() => {this.scrollToSection()},800)
        })
    },
    mounted() {
        let s = localStorage.getItem('homeView');
        if(s == 1){
            setTimeout(() => {this.scrollToSection()},800)
            // this.scrollToSection()
            localStorage.removeItem('homeView')
        }
    },
    methods: {
        scoll(sectionId) {
            // 获取包裹内容的元素
            window.scrollTo({
                top: 0, // 滚动到顶部位置
                behavior: 'smooth' // 平滑滚动效果
            })
        },
        scrollToSection(sectionId) {
            const section = document.getElementById('teacherTeam1');
            if (section) {
                section.scrollIntoView({ behavior: 'smooth' });
            }
        },
        init(){
            this.getGoods()//热门课程
            //免费试听课列表
            this.getCourse()
            this.getTeacher()
            //在线题库
            this.getThirdData()



        },
        getSecondCategory(){
            this.$api.home.secondCategory().then(res=>{
                this.homeData.secondCategory = res.data.data||[]
                if(res.data.data&&res.data.data.length>0){
                    this.activeData.goodsSecondCategory = res.data.data[0].config_id
                    this.activeData.courseSecondCategory = res.data.data[0].config_id
                    this.activeData.teacherSecondCategory = res.data.data[0].config_id
                    this.activeData.third = res.data.data[0].config_id
                    
                    this.init()
                }
                
            })
        },
        // 热门课程
        getGoods(){
            this.$api.home.goods({
                limit:99,
                page:1,
                project:this.activeData.goodsSecondCategory,
                recommend:1,
            }).then(res => {
                this.homeData.goods = res.data.data||[]
            })
        },
        // 试听课
        getCourse(){
            this.$api.home.course({
                limit:99,
                page:1,
                project:this.activeData.courseSecondCategory,
                recommend:1,
            }).then(res => {
                this.homeData.course = res.data.data||[]
            })
        },
        // 师资团队
        getTeacher(){
            this.$api.home.teacher({
                limit:20,
                page:1,
                project:this.activeData.teacherSecondCategory,
                recommend:1
            }).then(res=>{
                this.homeData.teacher = res.data.data||[]
                // this.activeTeacherIndex = 'teacherId'+this.homeData.teacher[0].teacher_id

            })
        },
        getThirdData(){
            let params = ['lnzt', 'zjlx', 'mnst']
            console.log(params,1213213)
            params.forEach( async (item)  => {
                let res = await this.getThird(item)
                this.homeData[item] = res.data || []
            })
        },
        // 在线题库
        getThird(t){
            return new Promise((resolve, reject)=>{
                this.$api.home.getThird({
                    limit:10,
                    page:1,
                    type:t,//:lnzt=历年真题,zjlx=章节练习,mnst=模拟试题
                    project:this.activeData.third,
                }).then(res => {
                    resolve(res.data)
                })
                .catch(err=>{
                    reject(err)
                })
            })
            
        },
        getTuijian(){
            this.$api.home.getTuijian().then(res => {
                this.homeData.tuijian = res.data||[]
            })
        },
        
         getHomeData(){
            let params = ['poster', 'sparkle', 'news', 'homefaq','honor']
            params.forEach( async (item)  => {
                let res = await this.news(item)

                this.homeData[item] = res.data || []
            })
        },
        toPage(it,key,storeKey){
            console.log(it,key,2222222)
            let paths = {path:'/'+key,query:{}}
            if(storeKey){
                localStorage.setItem(storeKey,it)
                paths.query[storeKey] = it
            }
           
            this.$router.push(paths)
        },
        news(type){
            return new Promise((resolve,reject)=>{
                this.$api.home.news({
                    limit:10,
                    page:1,
                    type:type
                }).then(res=>{
                    resolve(res.data)
                })
                .catch(err=>{
                    reject(err)
                })

            })

        },
        change(e,key){
            this.activeData[key] = e;
        },
        setActiveClick(val,key,fun){
            this.activeData[key] = val;
            this[fun]();
        },
    }
}
</script>
<style lang="scss" scoped>
// @import '../../assets/css/index.scss';

/*隐藏题库二建*/
.question .unifyTitle .swiper-wrapper p:nth-child(2) {
    display: none;
}

.question .queCon div:nth-child(2) {
    display: none;
}
html, body, div, span,object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strike, strong, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0; font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
html,body{margin:0; padding:0; font-family:"Microsoft YaHei","SimSun"; color: #3C464F; font-size: 14px; background:#f7f8fa; min-width: 1300px;}
body a{cursor: pointer; text-decoration:none; color:#3C464F; font-size: 14px;}
body input{outline:none;}
body input::-webkit-input-placeholder { color: #999; }
body input:-moz-placeholder { color: #999; }
body input::-moz-placeholder { color: #999; }
body input:-ms-input-placeholder { color: #999; }
ol,ul{list-style: none;}
.clear:after{content:""; display:block; visibility:hidden; height:0; clear:both;}
.clear{zoom:1;}
.fl{float:left;}
.fr{float:right;}
.w1200{width:1200px; margin: 0 auto; position: relative;}
#textBox{color: #000; float: left;margin-left: 15px;width: 330px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

/** HEADER **/
.header{background: #fff;}
/* HEADER  TOP */
.top{padding: 14px 0; box-shadow: 0px 5px 20px 0px rgba(230, 230, 230, 0.35);}
.top .fl span{letter-spacing:2px; font-size: 15px; color: var(--bg-color,'#FF6900');}
.top .fr span{color: var(--bg-color,'#FF6900'); display: inline-block; font-size: 15px;}
.top .fr span:first-child:before{content: ''; display: block; width: 20px; height: 20px; background: url(../../assets/image/top_tel.png); background-size: 100%; float: left; margin-right: 5px;}
/* HEADER LOGO */
.topImg{padding: 26px 0 12px; position: relative;}
.topImg .logo{display: block; height:70px; width: 300px; text-align: center;}
.topImg .logo img{height: 100%;}
.topImg .animal{position: absolute; right: 0; top: 18px; }
/* HEADER 导航 */
.navigation p{font-size: 18px; width: 300px; height: 42px; line-height: 42px; color: #fff; letter-spacing: 2px; text-align: center; background: var(--bg-color,'#FF6900'); margin-right: 20px; float: left;}
.navigation a{font-size: 16px; line-height: 30px; padding: 0 15px; display: inline-block;}
.navigation a:after{width: 20px; height: 2px; background: #fff; margin: 10px auto 0; content: ''; display: block;}
.navigation a:hover{color: var(--bg-color,'#FF6900');}
.navigation a:hover:after{background: var(--bg-color,'#FF6900');}

/** BANNER **/
/*BANNER & 轮播图*/
.banner{width:100%; position: relative;}
.banner .flexslider{position:relative; width:100%; height:420px; overflow: hidden; z-index:1;}
.banner .flexslider .slides{z-index:2; overflow:hidden;}
.banner .flexslider .slides li{width:100%; height:420px; overflow:hidden; background-position: center center;}
.banner .flexslider .slides li a{display: block; width: 100%; height: 100%;}
.flex-control-nav{position:absolute; bottom:8px; z-index:2; width: 100%; text-align:center;}
.flex-control-nav li{display:inline-block; margin:0 5px; *display:inline; zoom:1;}
.flex-control-nav a{display:inline-block; width:10px; height:10px; line-height:40px; overflow:hidden; background:#FFF; opacity:.5; border-radius:5px;}
.flex-control-nav a.flex-active{width: 30px !important; opacity:1;}
/*BANNER & 栏目展示*/
.listW{position: absolute; left: 0; top: 0; width: 100%;}
.listCon {position: absolute; left: 0; top: 0; width: 300px; height:420px; background: rgba(255, 255, 255, 0.7); z-index: 3; overflow: auto; }
/*定义滚动条样式*/
.listCon::-webkit-scrollbar{width:6px; height:6px;}
/*定义滚动条轨道内阴影+圆角*/
.listCon::-webkit-scrollbar-track{background:#e2e2e2;}
/*定义滑块内阴影+圆角*/
.listCon::-webkit-scrollbar-thumb{background:#ccc; border-radius:20px; }
.listCon dt{line-height: 24px; font-size: 18px; padding:20px 0 0 20px; margin-bottom: 8px;}
.listCon dt img{width: 22px; display: block; float: left; margin-right: 10px;}
.listCon dd{padding: 0 20px 0 50px; display: flex; flex-wrap: wrap;}
.listCon dd a{font-size:14px; line-height:36px; min-width: 50%; display: inline-block;}
.listCon dd a:hover{color: var(--bg-color,'#FF6900');}
/*BANNER & 登录注册*/
.loginCont{width: 240px; height:420px; padding: 0 20px; background:url(../../assets/image/login_bg.png); z-index: 3; position: absolute; right: 0; top: 0;}
.loginCont .loginBtn{width: 240px; height: 40px; line-height: 40px; background: var(--bg-color,'#FF6900'); color: #fff; font-size: 18px; border-radius: 20px; margin: 30px 0; display: block; text-align: center;}
.loginCont .loginBtn:hover{background: var(--bg-color,'#FF6900');}
.loginForm .loginTitle{text-align: center; font-size: 24px ;font-weight: bold; margin: 30px 0; letter-spacing: 1px;}
.loginForm .loginTitle span{color: var(--bg-color,'#FF6900'); display: inline-block;}
.loginForm .loginTitle span:after{width: 26px; height: 9px; background: url(../../assets/image/login_title_icon.png); content: ''; display: block; margin: 0 auto;}
.loginForm #userName{margin-bottom: 20px;}
.loginForm #userName,.loginForm #userPwd{width:240px; height:44px; border-radius:20px; background:#F4F4F4; color: #999; text-indent: 20px; border: 0; }
.loginForm .tools #autologin{float: left;}
.loginForm .tools a{float: right; color: var(--bg-color,'#FF6900');}
.loginForm .tools a:hover{text-decoration: underline;}
.loginAfter .userInfo{display: flex; flex-wrap: wrap; margin: 42px 0 26px;}
.loginAfter .userInfo .userImg{width: 60px; height: 60px; margin:0 16px 0 8px; border-radius: 100%;}
.loginAfter .userInfo p{padding: 6px; font-size: 15px; line-height: 24px;}
.loginAfter .userInfo span{color: var(--bg-color,'#FF6900');}
.loginAfter .alerTxt{color:#666; line-height:24px;}
.loginAfter .alerTxt span{color: var(--bg-color,'#FF6900');}
.loginAfter .loginMenu{display: flex; flex-wrap: wrap;}
.loginAfter .loginMenu a{width: 50%; text-align: center; color: #666; line-height: 14px; margin-bottom: 12px;}
.loginAfter .loginMenu a:before{width: 14px; height: 14px; margin-right: 8px; background: url(../../assets/image/login_right.png); position: relative; top: 1px; content:''; display: inline-block;}
.loginAfter .loginMenu a:hover{color: var(--bg-color,'#FF6900');}

/** 优势 **/
.flow{padding:50px 0;}
.flow ul{display: flex;}
.flow li{width: 25%; text-align: center;}
.flow li div{width: 100px; height: 100px; border:2px dotted #f8dedb; border-radius:50%; margin: 0 auto; }
.flow li div img{width: 79px; height: 79px; margin: 10px 0;}
.flow li p{font-size: 20px; line-height: 20px; margin: 16px 0 12px;}
.flow li  span{color: #666;}

/** 主体内容 **/
.con{width: 1120px; padding: 40px; background: #fff; box-shadow: 0px 8px 20px 0px rgba(45, 28, 23, 0.04); margin: 0 auto 20px;}
.con ul li:hover{box-shadow: 0px 6px 15px 0px rgba(45, 28, 23, 0.04); cursor: pointer;}

/** 主内容 通用标题 **/
.unifyTitle{height: 30px; padding-bottom:20px; border-bottom: 1px solid #F5F5F5; margin-bottom: 40px;  background: url(../../assets/image/title_icon.png)no-repeat left center;}
.unifyTitle b{font-size:30px; line-height: 30px; margin:0 60px 0 42px; font-weight: bold; float: left;}
.unifyTitle b span{color: var(--bg-color,'#FF6900');}
.unifyTitle .navMenu{float: left; width: 760px; overflow: hidden;}
.unifyTitle .navMenu .swiper-slide{font-size: 18px; line-height: 18px; padding-top:6px; text-align: center; cursor: pointer; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.unifyTitle .navMenu .swiper-slide:after{width: 20px; height: 2px; background: #fff; margin:10px auto 0; content: ''; display: block;}
.unifyTitle .navMenu .swiper-slide:hover{color: var(--bg-color,'#FF6900');}
.unifyTitle .navMenu .swiper-slide:hover:after{background: var(--bg-color,'#FF6900');}
.unifyTitle .navMenu .active{color: var(--bg-color,'#FF6900');}
.unifyTitle .navMenu .active:after{background: var(--bg-color,'#FF6900');}
.unifyTitle .more{color: #666; width: 90px; height: 30px; line-height: 30px; background: #F5F5F5; text-align: center; border-radius: 14px; display: block; float: right;}
.unifyTitle .more:hover{color: #fff; background: var(--bg-color,'#FF6900');}

/** 热门课程 **/
.hotCourse ul{display: flex;}
.hotCourse li{width: 262px; height: 326px; border-radius: 8px; border: 1px solid #f0f0f0; margin-right: 21px;}
.hotCourse li:last-child{margin-right: 0;}
.hotCourse li a{display: block;}
.hotCourse li .courseTop{width: 262px; height: 165px; text-align: center; border-radius: 8px 8px 0 0; position: relative;}
.hotCourse li .courseTop img{width: 100%; height: 100%;}
.hotCourse li .courseTop h6{display: none; font-size:32px; line-height:32px; padding: 42px 0 23px; font-weight: bold; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.hotCourse li .courseTop p{display: none; font-size: 18px; line-height: 30px; color: #fff; padding: 0 16px; border-radius: 15px; max-width: 200px; /* display: inline-block;*/ text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.hotCourse li .courseBotm{padding: 10px; height:141px; position: relative;}
.hotCourse li .courseBotm p{font-size: 16px; line-height: 22px; margin-bottom: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.hotCourse li .courseBotm span{color: #666; font-size: 13px; background: #F5F5F5; border-radius: 2px; padding: 5px 10px; margin:0 10px 5px 0; display: inline-block;}
.hotCourse li b{font-size: 24px; line-height: 24px; color: var(--bg-color,'#FF6900'); font-weight: bold; position: absolute; left: 10px; bottom: 16px;}
.hotCourse li b:before{font-size: 16px; content: '￥'; display: inline-block;}
/* .hotCourse li:nth-child(4n+1) .courseTop{background: url(../../assets/image/hot_course_01.png)no-repeat center; background-size: 100%;}
.hotCourse li:nth-child(4n+2) .courseTop{background: url(../../assets/image/hot_course_02.png)no-repeat center; background-size: 100%;}
.hotCourse li:nth-child(4n+3) .courseTop{background: url(../../assets/image/hot_course_03.png)no-repeat center; background-size: 100%;}
.hotCourse li:nth-child(4n+4) .courseTop{background: url(../../assets/image/hot_course_04.png)no-repeat center; background-size: 100%;} */

/*.hotCourse li:nth-child(4n+1) .courseTop h6{color: #fff; text-shadow: 5px 4px 2px #0e899e;}
.hotCourse li:nth-child(4n+1) .courseTop p{background: linear-gradient(0deg, #019F72, #31B079); box-shadow: 3px 3px 1px #157e57;}
.hotCourse li:nth-child(4n+2) .courseTop h6{color:#E83B2B; text-shadow:3px 3px 2px #f3b1ab;}
.hotCourse li:nth-child(4n+2) .courseTop p{ background:#F25344; box-shadow: 3px 3px 1px #f3b1ab;}
.hotCourse li:nth-child(4n+3) .courseTop h6{color:#FFDAB2; text-shadow:3px 3px 2px #45538b;}
.hotCourse li:nth-child(4n+3) .courseTop p{color: #223066; background:#FFE5C9; box-shadow: 3px 3px 1px #45538b;}
.hotCourse li:nth-child(4n+4) .courseTop h6{color:#3761DB; text-shadow:3px 3px 2px #a8bef9;}
.hotCourse li:nth-child(4n+4) .courseTop p{ background:#4C7DEE; box-shadow: 3px 3px 1px #a8bef9;}*/

/** 公开直播课 **/
.openClass {display: none;}
.openClass .classCon{display: none;}
.openClass .classCon:first-child{display: block;}
.openClass ul{display: flex;}
.openClass li{width: 264px; margin-right: 21px; text-align: center;}
.openClass li:last-child{margin-right: 0;}
.openClass li h6{width: 230px; height: 46px; line-height: 46px; font-size: 20px; color: #fff; font-weight: bold; margin: 0 auto; background:url(../../assets/image/open_top.png); }
.openClass li div{width: 260px; height:316px; border-radius: 8px; border: 1px solid #F5F5F5; background: url(../../assets/image/open_bg.png)no-repeat center #fff; background-size: auto 100%;}
.openClass li div img{display: block; width: 112px; height: 112px; margin:20px auto 12px; background: #f5f5f5; border-radius: 50%;}
.openClass li div b{font-size: 18px; line-height: 18px; color: #000; font-weight: bold;}
.openClass li div p{font-size: 16px; color: #666; margin:20px 10px 12px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.openClass li div span{font-size: 16px; color: #666;}
.openClass li .joinLive{display: block; width: 136px; height: 38px; line-height: 38px; font-size: 15px; margin:20px auto 0; border-radius: 30px; color: #fff; background: linear-gradient(90deg,#ff3521 0%,#fc9481 100%);}
.openClass li .joinLive:hover{background: linear-gradient(90deg,#fc9481 0%,#ff3521 100%);}

/** 免费试听课 **/
.freeDemo ul{display: flex;}
.freeDemo li{width: 262px; margin-right: 21px; padding-bottom: 16px; border: 1px solid #F5F5F5; border-radius:24px 24px 8px 8px;}
.freeDemo li:last-child{margin-right: 0;}
.freeDemo li a{display: block;}
/*
.freeDemo li .lessonTop{text-align: center; width: 262px; height: 180px; border-radius: 8px 8px 0 0; background: url(../../assets/images/free_img.png)no-repeat center center; background-size: 100%;}
.freeDemo li .lessonTop h6{font-size: 32px; line-height: 30px; color:#fff; padding: 46px 0 32px; font-weight: bold; text-shadow: 3px 3px 1px #C23732; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.freeDemo li .lessonTop span{font-size: 18px; line-height: 30px; color: #CD0000; padding: 0 16px; border-radius: 15px; max-width: 200px; display: inline-block; box-shadow: 3px 3px 1px #ef7c5a; background:#FFF899; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
*/
.freeDemo li .classImg{width: 100%; height: 187px; background: url(../../assets/image/free_bgimg.png); background-size: 100% 100%; border-radius: 24px;}
.freeDemo li .classImg img{width: 100%; height: 100%; vertical-align: top;}
.freeDemo li p{font-size: 16px; line-height: 16px; margin: 16px 12px 16px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.freeDemo li .classTeaName{color: #999;}
.freeDemo li .classTeaName:before{display:inline-block; width: 14px; height: 14px; background:url(../../assets/image/free_icon.png); margin-right:8px; content: '';}
.freeDemo li .lessonBotm{padding: 0 12px; height: 28px; line-height: 28px;}
.freeDemo li .lessonBotm i{ width: 80px; height: 28px; line-height: 28px; color: #fff; background: var(--bg-color,'#FF6900'); text-align: center; border-radius: 14px; display: block; float: right;}
.freeDemo li:hover .lessonBotm i{opacity: .8;}

/*师资团队*/
.teacherTeam{position: relative; height: 460px;}
.teacherTeam .view{width:100%; height: 400px; position: absolute; left: 0; top: 140px;}
.teacherTeam .view .t_left{margin-left: 122px; }
.teacherTeam .view .t_left h5{font-size: 24px; line-height: 24px; margin-bottom: 26px;}
.teacherTeam .view .t_left h5 a{display: inline-block; width: 27px; height: 19px; margin-left: 20px; position: relative; top: 2px;  background: url(../../assets/image/teacher_shiting.png);}
.teacherTeam .view .t_left h5:after{display: block; content: ''; width: 93px; height: 5px; margin-top: 8px; background: url(../../assets/image/teacher_line.png); }
.teacherTeam .view .t_left p{line-height: 28px; margin-bottom: 18px;}
.teacherTeam .view .t_left p:after{content:""; display:block; visibility:hidden; height:0; clear:both;}
.teacherTeam .view .t_left p b{color: var(--bg-color,'#FF6900'); float: left; display: block;}
.teacherTeam .view .t_left p span{width: 546px; float: left; display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.teacherTeam .view .t_right{width: 378px; height: 400px; text-align: center; position: absolute; right:0; bottom: 0; background:url(../../assets/image/teacher_big_bg.png)no-repeat center; overflow: hidden;}
.teacherTeam .view .t_right img{vertical-align: bottom;}
.teacherTeam .preview{position: absolute; left: 10px; bottom: 10px; width: 680px; padding: 10px 46px; background: #F5F5F5; cursor: pointer;}
.teacherTeam .preview .swiper-container{width:680px; height: 160px; overflow: hidden;}
.teacherTeam .preview .swiper-slide{opacity: 0.7; width: 150px; height: 160px; margin: 0 0; text-align: center; background:url(../../assets/image/teacher_small_bg.png); overflow: hidden;}
.teacherTeam .preview .swiper-slide img{width: 130px; margin-top: 10px;}
.teacherTeam .preview .btn{position:absolute; top: 0; width: 24px; height: 100%; z-index: 2; background-repeat: no-repeat; background-position: center;}
.teacherTeam .preview .prev{background-image:url(../../assets/image/teacher_arrow_prev.png); left:0;}
.teacherTeam .preview .next{background-image:url(../../assets/image/teacher_arrow_next.png); right:0;}
.teacherTeam .preview .active{opacity: 1;}
.teacherTeam .preview .btn:hover{opacity: .8;}

/*历年真题*/
.queCon div:first-child{display: block;}
.queCon div{display: none;}
.queCon div:after{content:""; display:block; visibility:hidden; height:0; clear:both;}
.queCon div dl{width: 340px; margin-right: 50px; float: left;}
.queCon div dl:last-child{margin-right: 0;}
.queCon div dl span{color: #999; float: right;}
.queCon div dt{line-height: 18px; border-bottom: 1px solid #F0F0F0;}
.queCon div dt b{font-size: 18px; float: left;}
.queCon div dt b:after{display: block; content: ''; width: 50px; height: 2px; background: var(--bg-color,'#FF6900'); border-radius: 1px; margin:12px 0 0 10px;}
.queCon div dd{color: var(--bg-color,'#FF6900'); line-height: 14px; margin-top: 22px;}
.queCon div dd .a{color: #3C464F; float: left; margin-left:8px; width: 246px; display:block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.queCon div dd i{float: left; font-size: 12px; position: relative; top: -1.5px}
.queCon div dd .a:hover{color: var(--bg-color,'#FF6900'); text-decoration: underline;}
.queCon div dt:after,.queCon dd:after{content:""; display:block; visibility:hidden; height:0; clear:both;}

/*最新资讯 & 常见问题*/
.news_question {width: 1200px; margin: 20px auto;}
.news_question div{padding: 40px; width:510px; min-height: 508px; background: #fff; float: left; box-shadow: 0px 8px 20px 0px rgba(45, 28, 23, 0.04);}
.news_question div h5{line-height: 18px; border-bottom: 1px solid #F0F0F0;}
.news_question div h5 b{font-size: 18px; float: left;}
.news_question div h5 b:after{display: block; content: ''; width: 50px; height: 2px; background: var(--bg-color,'#FF6900'); border-radius: 1px; margin:12px 0 0 10px;}
.news_question div h5 a{color: #999; float: right;}
.news_question div h5 a:hover{color: var(--bg-color,'#FF6900');}
.news_question div p:after,.news_question div h5:after{content:""; display:block; visibility:hidden; height:0; clear:both;}
.news_question div p {margin-top: 22px; line-height: 14px;}
.news_question div p i{display: block; float: left; width: 14px; height: 14px; font-size: 12px; color: #fff; background: #8FC2EF; text-align: center; border-radius: 3px;}
.news_question div p:nth-child(2) i{background: var(--bg-color,'#FF6900');}
.news_question div p:nth-child(3) i{background: #EC8148;}
.news_question div p:nth-child(4) i{background: #F5C667;}
.news_question div p a{float: left; margin-left:10px; width: 386px; display:block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.news_question div p a:hover{color: var(--bg-color,'#FF6900'); text-decoration: underline;}
.news_question div p span{float: right; color: #999;}
.news_question div:last-child{float: right;}
.news_question div dl dt{height: 20px; line-height: 20px; padding-bottom: 6px; margin-top: 20px; border-bottom: 1px dashed #F0F0F0;}
.news_question div dl dt span{float: right; color: #999}
.news_question div dl dt:before{display: block; content: 'Q'; width: 20px; height: 20px; background: var(--bg-color,'#FF6900'); color: #fff; border-radius: 4px; text-align: center; float: left; margin-right: 12px; }
.news_question div dl dd{line-height: 22px; padding-top: 10px;}
.news_question div dl dd:before{display: block; content: 'A'; width: 20px; height: 20px; background: #F5F5F5; border-radius: 4px; text-align: center; float: left; margin-right: 12px; }

/*荣誉资质*/
.honor ul{display: flex;}
.honor ul li {width: 33.33%; text-align: center; margin-right: 20px;}
.honor ul li div{width: 352px; height: 34px; line-height: 34px; margin:0 auto; color: #fff; font-size: 24px; background: url(../../assets/image/honor_bg.png); text-align: center;}
.honor ul li p{list-style: 14px; margin-top: 10px;}

/*通用*/
.picScroll-left{position: relative;}
.picScroll-left .tempWrap{width: 1120px; position: relative; overflow: hidden;}
.picScroll-left i.btn{display: block; width:24px; height: 100%; position: absolute; top: 0; z-index: 999; cursor: pointer;}
.picScroll-left i.prev{left: -40px; background: url(../../assets/image/teacher_arrow_prev.png)no-repeat center;}
.picScroll-left i.next{right: -40px; background: url(../../assets/image/teacher_arrow_next.png)no-repeat center; }
.picScroll-left i.btn:hover{opacity: .8;}

/*右侧悬浮框*/
.right_tanc{position:fixed; right:0; top:200px; z-index:20; box-shadow: 0 0 10px 0px #9b9b9b;}
.right_tanc div{width:68px;height:62px;padding-top:14px;font-size:12px;cursor:pointer;text-align:center;background:#fff;color:#666;position:relative}
.right_tanc div i{display:block;width:26px;height:26px;margin:0 auto 4px}
.right_tanc div.consult i{background:url(../../assets/image/right_consult.png)no-repeat center center}
.right_tanc div.feedback a{font-size: 12px; color:#666;}
.right_tanc div.feedback i{background: url(../../assets/image/right_security.png)center / 100% 100% no-repeat;}
.right_tanc div.app i{background:url(../../assets/image/right_app.png)no-repeat center center}
.right_tanc div.wx i{background:url(../../assets/image/right_wx.png)no-repeat center center}
.right_tanc div.topa i{background:url(../../assets/image/right_up.png)no-repeat center center}
.right_tanc div .borc{width:48px;border-bottom:1px solid #f5f5f5;padding-bottom:15px}
.right_tanc div.consult .telPhoneC{display:none;position:absolute;right:68px;top:0;width:170px}
.right_tanc div.consult dl{width:140px;padding:5px 18px;text-align:left;background:#fff;}
.right_tanc div.consult dl dt{color:#666;padding-bottom:8px; font-size: 13px;}
.right_tanc div.consult dl dd{font-size:16px;font-weight:bold;color:var(--bg-color,'#FF6900')}
.right_tanc div.consult:hover .telPhoneC{display:block}
.right_tanc div.we .weC{display:none;position:absolute;right:68px;top:0;width:114px;height:114px;padding-top:0}
.right_tanc div.we p{border:1px solid #eee; background:#fff; padding:6px; border-radius: 6px;}
.right_tanc div.we p img{vertical-align:top;width:100px;height:100px}
.right_tanc div.app:hover .appCon{display:block}
.right_tanc div.wx:hover .wxCon{display:block}
.right_tanc .topa{padding-top:18px; height:44px; }
.right_tanc div:hover{text-decoration:underline}
</style>